import WfGroup from '../../public/wf-group/index';
import { getAntd,getEcCom } from '../../util/convert';
import { observer,inject } from "mobx-react/index";
import * as mobx from 'mobx';

@inject('globalStore')
@observer
export default class Main extends React.Component {
	constructor(props) {
		super(props);
	}

	render() {
		const { Row, Col } = getAntd();
		const {WeaBrowser,WeaSelect} = getEcCom();
		const {invertionInfo = {} } = this.props.globalStore;
		const {title,items = [],enableInterSpan ='',replacedatas} = mobx.toJS(invertionInfo);
		const com =  this.getInterventionContent(items,enableInterSpan,replacedatas);
		return(
			<div className='wf-req-intervenor'>
        		<WfGroup ecId={`${this && this.props && this.props.ecId || ''}_WfGroup@5jio6n`} title={title} needTigger={false} groupBodyComponent={com}/>
        	</div>
		)
	}
	
	getInterventionContent(items =[],enableInterSpan,_replacedatas){
		const { Row, Col } = getAntd();
		const {WeaBrowser,WeaSelect} = getEcCom();
        let random = Math.random();
		return (
			<div>
				{
					items.map((item = {})=>{
						const domKey = typeof item.domkey === "object" ? item.domkey[0] : item.domkey;
						const {labelcol,fieldcol,label,conditionType,domkey = [],browserConditionParam = {},options=[],viewAttr = 2} = item;
						let com = '';
						if(conditionType === 'SELECT'){
							com = <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@e1gk1h@${domKey}`} options={options} style={{'minWidth':'120px'}} viewAttr={viewAttr} widthMatchOptions={false} fieldName={domkey[0]} onChange={this.doSelectChangeEvent.bind(this,domkey[0])}/>
						}else if(conditionType === 'BROWSER'){
							let inputStyle = {"width":'300px'};
							
							let {replaceDatas = []} = browserConditionParam;
							if(_replacedatas){
								browserConditionParam.replaceDatas = _replacedatas;
							}
							com = <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@af46pi@${domKey}`} {...browserConditionParam} key={random} replaceNotCtrl={true} layout={document.body} inputStyle={inputStyle} fieldName={domkey[0]} onChange={this.doBrowserChangeEvent.bind(this,domkey[0])}/>
						}
						return (
							<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@tq7seb@${domKey}`}>
								<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@tlicya@${domKey}`} span={labelcol}>{label}</Col>
								<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@7l4j3b@${domKey}`} span={fieldcol}>
									{com}
									{domkey[0] == 'enableIntervenor' && <span style={{"color":"#FF4848","marginLeft":"5px"}}>{enableInterSpan}</span>}
								</Col>
							</Row>
						)
					})
				}
			</div>
		)
	}
	
	doSelectChangeEvent(domkey,v){
		const {changeSubmitParam,getInterventionUser} = this.props.globalStore;
		let updateinfo  = {};
		updateinfo[domkey] = v;
        changeSubmitParam(updateinfo);

		if(domkey == 'submitNodeId'){
			if(v) {
				let arr = v.split("_");
		        const selnodeid=arr[0];
        		const selnodetype=arr[1];
                getInterventionUser({nodeid:selnodeid,'nodetype':selnodetype});
			}
		}
	}
	
	doBrowserChangeEvent(domkey,ids,names,data){
        const {changeSubmitParam} = this.props.globalStore;
		let updateinfo  = {};
		updateinfo[domkey] = ids;
        changeSubmitParam(updateinfo);
	}
}